import React, { Component } from 'react'
import Dimensions from 'react-dimensions'
import { fetchData } from '../../../components/AjaxConsumer'
import SelectUrl from '../../../components/SelectUrl'
import ListModelDetail from './SearchModel'
import moment from 'moment'
import styles from './index_ad.scss'
import { Upload, Icon, Modal } from 'antd';

export default class AddPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            url: '',
            previewVisible: false,
            previewImage: '',
            fileList: [
                {
                    uid: '1',
                    groupId: 'group1/00/1.jpg',
                    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                },
                {
                    uid: '2',
                    groupId: 'group1/00/1.jpg',
                    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                }
            ],
        };

    }
    handleOk = () => {
        // let result = this.state.resData;
        this.setState({
            visible: false,
        });
        this.refreshHandle();
    };

    handleCancel = () => {
        this.setState({
            visible: false,

        });
    };

    refreshHandle = () => {
        console.log("刷新List列表");
        this.props.refreshHandle();
    };

    // 手工入库任务新增(外部调用)
    addHandle = () => {
        this.setState({
            visible: true,
            resData: '',
            url: '/product/intowarehouse/prohandin/batch/insert',
            formTitle: '手工入库任务新增'
        });
    };

    // 手工入库任务修改(外部调用)
    editHandle = (rowObj) => {
        //根据对象的Id 属性获取对象信息
        let handInNo = rowObj[0].data.handInNo;
        const options = {
            url: '/product/intowarehouse/prohandin/get/' + handInNo,
            type: 'get',
            condition: {},
        };
        console.log('editHandle----------------------editHandle');
        fetchData(this, options, (resData) => {
            console.log('editHandle---------fetchData-------------editHandle');
            this.setState({
                url: '/product/intowarehouse/prohandin/batch/update',
                resData: resData,
                formTitle: '手工入库任务修改',
                visible: true
            });
        });
    };

    handleCancelHide = () => this.setState({ previewVisible: false })

    handlePreview = (file) => {
        console.log("file.url: " + file.url);
        this.setState({
          previewImage: file.url || file.thumbUrl,
          previewVisible: true,
        });
    }

    handleChange = ({ fileList }) => {
        console.log("handleChange: " + JSON.stringify({ fileList }));
        this.setState({ fileList });
    }

    handleRemove = (file) => {
        console.log("handleRemove.file.url: " + JSON.stringify(file));
    }

    render() {
        const uploadButton = (
            <div>
              <Icon type="plus" />
              <div className="ant-upload-text">Upload</div>
            </div>
        );
        
        return (
            <Modal
                style={{ top: '20px' }}
                visible={this.state.visible}
                title={this.state.formTitle ? this.state.formTitle : '填写表单'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={'600px'}
                height={'500px'}
                footer=''
            >
                <Upload
                    action="/product/expose/upload/"
                    listType="picture-card"
                    fileList={this.state.fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                    onRemove={this.handleRemove}
                    >
                    {uploadButton}
                </Upload>
                <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancelHide}>
                    <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
                </Modal>
            </Modal>
        );
    }
}
